import React, {Component} from 'react';
import {Link, Route} from 'react-router-dom';
import Detail from './Deatail';

export default class Message extends Component {
	// 动态渲染列表
	state = {
		messageArr: [
			{id: '01', title: '消息一'},
			{id: '02', title: '消息二'},
			{id: '03', title: '消息三'},
		],
	};

	render() {
		const {messageArr} = this.state;
		return (
			<div>
				<ul>
					{messageArr.map(msgObj => {
						return (
							<li key={msgObj.id}>
								{/* 声明传入params参数 */}
								{/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>
									{msgObj.title}
								</Link> */}
								{/* 声明传入search参数 */}
								{/* <Link
									to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>
									{msgObj.title}
								</Link> */}

								{/* 声明传入state参数 */}
								<Link
									to={{pathname:"/home/message/detail",state:msgObj}}>
									{msgObj.title}
								</Link>
								&nbsp;&nbsp;
							</li>
						);
					})}
				</ul>

				{/* 声明接收params参数 */}
				{/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}

				{/* 声明接收search参数 */}
				{/* <Route path="/home/message/detail" component={Detail} /> */}

				{/* 声明接收state参数 */}
				<Route path="/home/message/detail" component={Detail} />
			</div>
		);
	}
}
